<template>
  <div class="app-container" style="position: relative; height: calc(100vh - 117px);">
    <div class="container">
      <el-tabs v-model="status" type="card" @tab-click="handleOrder">
        <el-tab-pane name="-9">
          <span slot="label"><i class="el-icon-s-order"/> 全部订单
            <el-tag type="danger" effect="dark" size="mini">{{ orderStatistics.allOrderCount }}</el-tag>
          </span>
        </el-tab-pane>
        <el-tab-pane name="0">
          <span slot="label"><i class="el-icon-bank-card"/> 待付款
            <el-tag type="danger" effect="dark" size="mini">{{ orderStatistics.waitPayOrderCount }}</el-tag>
          </span>
        </el-tab-pane>
        <el-tab-pane name="1">
          <span slot="label"><i class="el-icon-refrigerator"/> 待出库
            <el-tag type="danger" effect="dark" size="mini">{{ orderStatistics.waitOutOrderCount }}</el-tag>
          </span>
        </el-tab-pane>
        <el-tab-pane name="2">
          <span slot="label"><i class="el-icon-truck"/> 待发货(已出库)
            <el-tag type="danger" effect="dark" size="mini">{{ orderStatistics.waitDeliverOrderCount }}</el-tag>
          </span>
        </el-tab-pane>
        <el-tab-pane name="3">
          <span slot="label"><i class="el-icon-document"/> 待收货
            <el-tag type="danger" effect="dark" size="mini">{{ orderStatistics.waitReceiverOrderCount }}</el-tag>
          </span>
        </el-tab-pane>
        <el-tab-pane name="4">
          <span slot="label"><i class="el-icon-circle-check"/> 交易完成
            <el-tag type="danger" effect="dark" size="mini">{{ orderStatistics.receiverOrderCount }}</el-tag>
          </span>
        </el-tab-pane>
        <el-tab-pane name="5">
          <span slot="label"><i class="el-icon-circle-close"/> 已取消
            <el-tag type="danger" effect="dark" size="mini">{{ orderStatistics.cancelOrderCount }}</el-tag>
          </span>
        </el-tab-pane>
        <el-tab-pane name="-1">
          <span slot="label"><i class="el-icon-back"/> 申请退货
            <el-tag type="danger" effect="dark" size="mini">{{ orderStatistics.applyReOrderCount }}</el-tag>
          </span>
        </el-tab-pane>
        <el-tab-pane name="-2">
          <span slot="label"><i class="el-icon-finished"/> 确认退货
            <el-tag type="danger" effect="dark" size="mini">{{ orderStatistics.confirmReOrderCount }}</el-tag>
          </span>
        </el-tab-pane>
        <el-tab-pane name="-3">
          <span slot="label"><i class="el-icon-circle-close"/> 拒绝退货
            <el-tag type="danger" effect="dark" size="mini">{{ orderStatistics.refusedReOrderCount }}</el-tag>
          </span>
        </el-tab-pane>
      </el-tabs>
      <!--工具栏-->
      <div class="head-container">
        <el-form :model="dataFrom" :inline="true">
          <el-form-item label="订单编号：">
            <el-input
              v-model="dataFrom.orderSn"
              clearable
              placeholder="输入订单编号"
              style="width: 130px;"
            />
          </el-form-item>
          <el-form-item label="用户昵称：">
            <el-input
              v-model="dataFrom.nickName"
              clearable
              placeholder="输入用户昵称"
              style="width: 130px;"
            />
          </el-form-item>
          <el-form-item label="手机号：">
            <el-input
              v-model="dataFrom.userPhone"
              clearable
              placeholder="收货人手机号"
              style="width: 150px;"
            />
          </el-form-item>
          <el-form-item label="快递单号：">
            <el-input
              v-model="dataFrom.deliverySn"
              clearable
              placeholder="输入快递单号"
              style="width: 130px;"
            />
          </el-form-item>
          <el-form-item label="选择时间：">
            <el-date-picker
              v-model="chooseDate"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            />
          </el-form-item>
          <el-button size="small" type="success" icon="el-icon-search" @click="toQuery">搜索
          </el-button>
          <el-button
            type="danger"
            size="small"
            icon="el-icon-refresh"
            @click="refresh"
          >刷新
          </el-button>
          <el-button
            type="info"
            icon="el-icon-download"
            size="small"
            @click="handleExport"
          >导出
          </el-button>
        </el-form>
      </div>
      <ePrint ref="form5" :is-add="isAdd" :print-list="printList"/>
      <!--表单组件-->
      <eForm ref="form"/>
      <!--表格渲染-->
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="data"
        size="small"
        style="width: 100%;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50"/>
        <el-table-column prop="id" width="100" label="ID"/>
        <el-table-column prop="orderSn" width="140" label="订单号"/>
        <el-table-column prop="nickName" label="用户昵称"/>
        <el-table-column prop="levelName" label="代理等级"/>
        <el-table-column prop="itemList" width="400" label="商品信息">
          <template slot-scope="scope">
            <el-table
              border
              :data="scope.row.itemList"
            >
              <el-table-column

                prop="productImage"
                label="图片"
              >
                <template slot-scope="scope">
                  <img
                    style="width: 30px;height: 30px;margin:0;cursor: pointer;"
                    :src="scope.row.productImage"
                    @click="getImageHandle(scope.row)"
                  >
                </template>
              </el-table-column>
              <el-table-column
                prop="productName"
                label="标题"
              />
              <el-table-column
                prop="price"
                label="价格(元)"
              />
              <el-table-column
                prop="num"
                label="数量"
              />
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="金额信息">
          <template slot-scope="scope">
            <span style="color: #5daf34">实付款：￥{{ scope.row.payAmount }}</span><br>
            <span style="color: #5daf34">运费：￥{{ scope.row.freightAmount }}</span><br>
            <!--            <span style="color: #5daf34">实付金额：￥{{ scope.row.payAmount }}</span><br>-->
            <span>运送方式：{{ scope.row.deliveryCompany }}</span><br>
            <span>付款方式：{{ scope.row.payType | formatPayType }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="status" label="订单状态">
          <template slot-scope="scope">
            <el-tag :type="butType(scope.row.status)" size="small">{{ scope.row.status | formatStatus }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" width="160" label="下单时间">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="success" size="small" style="margin-right: 5px" @click="detail(scope.row)">详情</el-button>
            <el-dropdown size="small" split-button type="primary" trigger="click">
              操作
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button
                    v-if="scope.row.status===2"
                    size="small"
                    style="width: 100%; margin: 5px 0"
                    plain
                    type="primary"
                    icon="el-icon-truck"
                    @click="frame(scope.row.id,0)"
                  >发货
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button
                    v-if="scope.row.status===1"
                    size="small"
                    style="width: 100%; margin: 5px 0"
                    plain
                    type="info"
                    @click="cancel(scope.row.orderSn)"
                  >取消订单
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button
                    v-if="scope.row.status===1"
                    size="small"
                    style="width: 100%; margin: 5px 0"
                    plain
                    type="info"
                    @click="outWare(scope.row.orderSn)"
                  >订单出库
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button
                    v-if="scope.row.status===2"
                    size="small"
                    style="width: 100%; margin: 5px 0"
                    plain
                    type="info"
                    @click="cancelWare(scope.row.orderSn)"
                  >取消出库
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button
                    v-if="scope.row.status===1 || scope.row.status===2 "
                    size="small"
                    style="width: 100%; margin: 5px 0"
                    plain
                    type="warning"
                    @click="frame(scope.row.id,1)"
                  >修改地址
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button
                    v-if="scope.row.status===3 "
                    size="small"
                    style="width: 100%; margin: 5px 0"
                    plain
                    type="warning"
                    @click="frame(scope.row.id,2)"
                  >修改单号
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button
                    v-if="scope.row.status===2 ||scope.row.status===3 || scope.row.status===4 "
                    size="small"
                    style="width: 100%; margin: 5px 0"
                    plain
                    type="info"
                    icon="el-icon-printer"
                    @click="getPrint(scope.row)"
                  >打印
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button
                    v-if="scope.row.status===-1 "
                    size="small"
                    style="width: 100%; margin: 5px 0"
                    plain
                    type="success"
                    @click="agrreReturn(scope.row.orderSn,0)"
                  >同意退货
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button
                    v-if="scope.row.status===-1 "
                    size="small"
                    style="width: 100%; margin: 5px 0"
                    plain
                    type="danger"
                    @click="agrreReturn(scope.row.orderSn,1)"
                  >拒绝退货
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button
                    type="danger"
                    style="width: 100%; margin: 5px 0"
                    plain
                    icon="el-icon-delete"
                    size="small"
                    @click="deleteOrder(scope.row.id)"
                  >
                    删除
                  </el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--添加订单打印及订单导出功能 2020.04.13 changxh-->
    <el-footer class="footer-contains">
      <div class="footer-search">
        <el-button
          type="warning"
          icon="el-icon-printer"
          :disabled="dataListSelections.length<=0"
          @click="getPrintList()"
        >
          批量打印
        </el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          :disabled="dataListSelections.length<=0"
          @click="deleteOrder()"
        >
          批量删除
        </el-button>
      </div>
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page="page"
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </el-footer>
    <!-- 发货/修改单号/修改地址-->
    <el-dialog
      :title="shipTitle"
      :visible.sync="shipVisible"
      label-position="right"
      width="25%"
    >
      <el-form v-model="editForm">
        <!-- 发货-->
        <div v-if="shipStatus===0 || shipStatus===2">
          <el-form-item label="选择物流：">
            <el-select v-model="editForm.deliveryCompany" clearable @change="deliveryChange(editForm.deliveryCompany)">
              <el-option
                v-for="item in exprssList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="物流编号：">
            <el-input
              v-model="editForm.deliverySn"
              type="text"
              auto-complete="on"
              style="width: 250px"
              placeholder="请输入物流编号"
            />
          </el-form-item>
        </div>
        <!-- 修改地址-->
        <div v-if="shipStatus===1">
          <el-form-item label="用户姓名">
            <el-input
              v-model="editForm.receiverName"
              type="text"
              auto-complete="on"
              style="width: 250px"
              placeholder="请输入用户姓名"
            />
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input
              v-model="editForm.receiverPhone"
              type="text"
              auto-complete="on"
              style="width: 250px"
              placeholder="请输入手机号"
            />
          </el-form-item>
          <el-form-item label="省">
            <el-input
              v-model="editForm.receiverProvince"
              type="text"
              auto-complete="on"
              style="width: 250px;margin-left: 45px"
              placeholder="请输入省"
            />
          </el-form-item>
          <el-form-item label="市">
            <el-input
              v-model="editForm.receiverCity"
              type="text"
              auto-complete="on"
              style="width: 250px;margin-left: 45px"
              placeholder="请输入市"
            />
          </el-form-item>
          <el-form-item label="区">
            <el-input
              v-model="editForm.receiverRegion"
              type="text"
              auto-complete="on"
              style="width: 250px;margin-left: 45px"
              placeholder="请输入区"
            />
          </el-form-item>
          <el-form-item label="详细地址">
            <el-input
              v-model="editForm.receiverDetailAddress"
              type="text"
              auto-complete="on"
              style="width: 250px"
              placeholder="请输入详细地址"
            />
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="shipVisible=false">取 消</el-button>
        <el-button type="primary" @click="complex()">确 定</el-button>
      </div>
    </el-dialog>
    <!--    查看图片-->
    <el-dialog
      title="商品图片"
      :visible.sync="imageVisible"
      width="30%"
    >
      <el-image
        style="display: flex;align-content: center;justify-content: center"
        :src="imgUrl"
      />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="imageVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import initData from '@/mixins/crud'
import {
  info,
  deleteOrder,
  editOrder,
  isReturn,
  closeOrder,
  outOrderList,
  outWare,
  orderStatistics,
  cancelWare
} from '@/api/oms/order'
import {list} from '@/api/oms/express'
import ePrint from './print'
import eForm from './orderDetail'
// import {downloadFile} from '@/utils'
import downloadFile from 'js-file-download'
import { parseTime } from '@/utils'

export default {
  components: {ePrint, eForm},
  filters: {
    formatStatus(value) {
      if (value === 0) {
        return '待付款'
      } else if (value === 1) {
        return '待出库'
      } else if (value === 2) {
        return '待发货'
      } else if (value === 3) {
        return ' 待收货'
      } else if (value === 4) {
        return '已完成'
      } else if (value === 5) {
        return '已取消'
      } else if (value === -1) {
        return '申请退货'
      } else if (value === -2) {
        return '确认退货'
      } else if (value === -3) {
        return '拒绝退货'
      }
    },
    formatPayType(value) {
      if (value === 0) {
        return '余额'
      } else if (value === 1) {
        return '微信'
      } else if (value === 2) {
        return '支付宝'
      } else if (value === 3) {
        return ' 银行卡'
      } else if (value === undefined) {
        return '暂无'
      }
    }
  },
  mixins: [initData],
  data() {
    return {
      loading: false,
      status: '-9',
      imgUrl: '',
      imageVisible: false,
      shipVisible: false,
      shipTitle: '',
      shipStatus: 0,
      productImage: '',
      orderStatistics: {
        allOrderCount: 0,
        waitPayOrderCount: 0,
        waitOutOrderCount: 0,
        waitDeliverOrderCount: 0,
        waitReceiverOrderCount: 0,
        receiverOrderCount: 0,
        cancelOrderCount: 0,
        applyReOrderCount: 0,
        confirmReOrderCount: 0,
        refusedReOrderCount: 0
      },
      editForm: {
        id: null,
        status: 0,
        deliveryCode: null,
        deliveryCompany: null,
        deliverySn: null,
        receiverName: null,
        receiverPhone: null,
        receiverProvince: null,
        receiverCity: null,
        receiverRegion: null,
        freightAmount: null,
        receiverDetailAddress: null,
        type: null
      },
      exprssList: [],
      printList: [],
      dataFrom: {
        orderSn: '',
        nickName: '',
        userPhone: '',
        deliverySn: ''
      },
      printChecked: false,
      batchHandle: '',
      createTime: [],
      chooseDate: [],
      dataListSelections: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  created() {
    this.status = this.$route.query.status
    if (this.status === undefined) {
      this.status = '-9'
    }
    this.refreshOrder()
  },
  methods: {
    getOrderStatisticsCount() {
      orderStatistics().then(res => {
        this.orderStatistics = res.data
      })
    },
    deliveryChange(val) {
      this.exprssList.forEach(item => {
        if (item.name === val) {
          this.editForm.deliveryCode = item.code
        }
      })
    },
    butType(status) {
      if (status === 1) {
        return 'warning'
      } else if (status === 2) {
        return 'warning'
      } else if (status === 2) {
        return 'warning'
      } else if (status === 3) {
        return 'warning'
      } else if (status === 4) {
        return 'success'
      } else if (status === 5) {
        return 'danger'
      } else if (status === -1) {
        return 'warning'
      } else if (status === -2) {
        return 'success'
      } else if (status === -3) {
        return 'danger'
      }
    },
    beforeInit() {
      this.url = 'admin/api/order/list'
      this.params = {
        orderStatus: this.status,
        orderSn: this.dataFrom.orderSn,
        nickName: this.dataFrom.nickName,
        userPhone: this.dataFrom.userPhone,
        deliverySn: this.dataFrom.deliverySn,
        startTime: this.chooseDate[0],
        endTime: this.chooseDate[1]
      }
      const query = this.query
      const type = query.type
      const value = query.value
      if (type && value) {
        this.params[type] = value
      }
      return true
    },
    // 多选
    handleSelectionChange(val) {
      this.dataListSelections = val
    },
    // 查看图片
    getImageHandle(row) {
      this.imageVisible = true
      this.imgUrl = row.productImage
    },
    // 刷新
    refresh() {
      this.dataFrom = {}
      this.chooseDate = []
      this.dataListSelections = []
      this.batchHandle = ''
      this.refreshOrder()
    },
    // 打印单个订单
    getPrint(row) {
      this.dataListSelections.push(row)
      this.getPrintList()
    },
    // 打印订单
    getPrintList() {
      const ids = []
      this.dataListSelections.forEach(item => {
        if (item.status === 2 || item.status === 3 || item.status === 4) {
          ids.push(item)
        }
      })
      if (ids.length === 0) {
        this.$message({
          message: '选中订单中没有可以打印的订单',
          type: 'warning',
          duration: 1500
        })
        return
      }
      this.printList = ids
      // const _this = this.$refs.form5
      // _this.dialog = true
      this.$router.push({
        path: '/order/orderPrint',
        query: {
          printList: JSON.stringify(this.printList)
        }
      })
    },
    // 订单详情
    detail(row) {
      const _this = this.$refs.form
      _this.dialog = true
      _this.orderDetail = row
    },
    // 弹框
    frame(id, status) {
      this.editForm.id = id
      this.shipVisible = true
      this.shipStatus = status
      info(id).then(res => {
        this.editForm = res.data
      })
      switch (status) {
        case 0 :
          this.shipTitle = '发货'
          this.getExprss()
          break
        case 1:
          this.shipTitle = '修改地址'
          break
        case 2:
          this.shipTitle = '修改单号'
          this.getExprss()
          break
      }
    },
    getExprss() {
      const param = {
        queryMode: 'list'
      }
      list(param).then(res => {
        this.exprssList = res.data
      })
    },
    // 修改
    complex() {
      switch (this.shipStatus) {
        case 0:
          this.editForm.status = 3
          break
        case 1:
          break
        case 2:
          break
      }
      this.editForm.type = this.shipStatus
      editOrder(this.editForm).then(() => {
        this.$message({
          message: '修改成功',
          type: 'success',
          duration: 1000,
          onClose: () => {
            this.shipVisible = false
            this.refreshOrder()
          }
        })
      })
    },
    // 取消订单
    cancel(orderSn) {
      this.$confirm('确定取消订单', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        closeOrder(orderSn).then(() => {
          this.$message({
            message: '订单取消成功',
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.refreshOrder()
            }
          })
        })
      }).catch(() => {
        this.$message.info('已取消')
        this.refreshOrder()
      })
    },
    outWare(orderSn) {
      this.$confirm('确定出库？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        outWare(orderSn).then(() => {
          this.$message({
            message: '订单出库成功',
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.refreshOrder()
            }
          })
        })
      }).catch(() => {
        this.$message.info('已取消')
        this.refreshOrder()
      })
    },
    cancelWare(orderSn){
      this.$confirm('确定取消出库？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cancelWare(orderSn).then(() => {
          this.$message({
            message: '取消出库成功',
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.toQuery()
              this.getOrderStatisticsCount()
            }
          })
        })
      }).catch(() => {
        this.$message.info('已取消')
      })
    },
    // 删除订单
    deleteOrder(id) {
      const ids = id ? [id] : this.dataListSelections.map(item => {
        return item.id
      })
      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteOrder(ids).then(() => {
          this.refreshOrder()
          this.$message.success('删除成功')
        })
      }).catch(() => {
        this.refreshOrder()
        this.$message.info('已取消')
      })
    },
    // 切换订单状态
    handleOrder(tab, event) {
      this.status = tab.name
      this.refreshOrder()
    },
    // 同意退货
    agrreReturn(orderSn, status) {
      const params = {
        orderSn: orderSn,
        status: status
      }
      isReturn(params).then(res => {
        this.$message({
          message: '操作成功',
          type: 'success',
          duration: 1500
        })
        this.refreshOrder()
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      let params = {
        type: this.status
      }
      if (this.chooseDate && this.chooseDate.length > 0) {
        params = {
          ...params,
          startTime: this.chooseDate[0],
          endTime: this.chooseDate[1]
        }
      }
      if (this.dataFrom.nickName) {
        params = {
          ...params,
          name: this.dataFrom.nickName
        }
      }
      if (this.dataFrom.userPhone) {
        params = {
          ...params,
          mobile: this.dataFrom.userPhone
        }
      }
      if (this.dataFrom.orderSn) {
        params = {
          ...params,
          orderSn: this.dataFrom.orderSn
        }
      }
      if (this.dataFrom.deliverySn) {
        params = {
          ...params,
          deliverySn: this.dataFrom.deliverySn
        }
      }
      this.$confirm('是否确认导出所有数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return outOrderList(params).then(res => {
          // downloadFile(response.data, 'client', 'xls')
          const fileName = '订单数据' + parseTime(new Date()) + '-' + name + '.xls'
          downloadFile(res.data, fileName)
        })
      })
    },
    refreshOrder() {
      this.getOrderStatisticsCount()
      this.toQuery()
    }
  }
}
</script>

<style scoped lang="scss">
.table-layout {
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
}

.table-cell-title {
  height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 5px;
  background: #F2F6FC;
  text-align: center;
  font-size: 13px;
  color: #303133;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 13px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.container {
  height: calc(100% - 80px);
  position: absolute;
  overflow: auto;
  width: calc(100% - 20px);

  .order-caculate {
    font-size: 14px;
    color: #909399;
    border-top: 1px solid #f0f0f0;
    padding: 20px 10px;

    .caculate-title {
      display: inline-block;
      margin-right: 50px;
    }

    .caculate-num {
      font-size: 20px;
      color: #ff4949;
    }
  }

  .el-table th {
    background-color: #fafafa;
  }
}

.footer-contains {
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  background-color: #f6f6f6;
  bottom: 0;
  flex-align: center;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  z-index: 999;
  padding: 0 20px 0 13px;
}

/*打印单样式编辑*/
.order-list {
  /*  height: 297mm;*/
  margin: 0 auto;
  width: 210mm;

  .order-title {
    height: 16mm;
    line-height: 16mm;
    font-size: 8mm;
    font-weight: bolder;
    text-align: center;
  }

  .order-info {
    span {
      display: inline-block;
      padding: 0 0 10px 0;
      font-size: 3mm;
    }

    span.info {
      width: 60mm;
    }
  }

  .el-table--small th, .el-table--small td {
    padding: 4px 0;
  }
}

/deep/ .el-table th > .cell {
  text-align: center;
}

/deep/ .el-table .cell {
  text-align: center;
}
</style>
